import React, { memo } from 'react';
import { useConnection } from '@xyflow/react';

const ConnectionLine = ({ fromX, fromY, toX, toY }) => {
    const { fromHandle } = useConnection();
    
    // React Flow 默认的贝塞尔曲线控制点计算
    // 水平方向上的偏移使用固定距离而不是相对距离
    const offset = 150;
    
    // 计算控制点
    const [sourceX, sourceY] = [fromX, fromY];
    const [targetX, targetY] = [toX, toY];
    
    // 根据起点和终点的相对位置决定控制点的方向
    const controlPoint1X = sourceX + offset;
    const controlPoint1Y = sourceY;
    const controlPoint2X = targetX - offset;
    const controlPoint2Y = targetY;

    return (
        <g>
            <path
                fill="none"
                stroke="#B1B5BD"
                strokeWidth={2}
                className="animated"
                d={`M${sourceX},${sourceY} C${controlPoint1X},${controlPoint1Y} ${controlPoint2X},${controlPoint2Y} ${targetX},${targetY}`}
            />
            <circle
                cx={targetX} 
                cy={targetY}
                fill="#fff"
                r={3}
                stroke="#B1B5BD"
                strokeWidth={2}
            />
        </g>
    );
};

export default memo(ConnectionLine)